<template>
   <div class=''>
        <van-swipe @change="onChange" :autoplay="3000">
            <van-swipe-item v-for="item in gallery" :key="item.id">
                <img :src="item.img_url" width="100%" height="100%"/>
            </van-swipe-item>
        </van-swipe>
        <Tips />
        <div class="info">
           <div class="title">{{ title }}</div>
           <div class="goods_brief">{{ goods_brief }}</div>
           <div class="price">{{ price | RMBformat }}</div>
       </div>
       <van-cell title="展示弹窗层" is-link @click="show=!show"/>
       <div class="attribute">
           <h3>商品参数</h3>
           <ul>
               <li v-for="(item,i) in attributeList" :key="i">
                   <div class="l">{{item.name}}</div>
                   <div class="r">{{item.value}}</div>
               </li>
           </ul>
       </div>
       <div v-html="goods_desc" class="goods_desc"></div>
       <AppGoodsActive @goToCard="goToCard" :goodsCount="goodsCount"/>
       <van-sku
        ref="sku"
        v-model="show"
        :sku="sku"
        :goods="goods"
        :hide-stock="sku.hide_stock"
        />
       <Products :goodsList="goodsList"/>
       <div style="height:.5rem;width:1;"></div>
   </div>
</template>

<script>
import { getGoodsData,gorRelatedData,GetGoodsCount,addToCard } from "@/request/api"
import Tips from "@/components/Tips.vue"
import AppGoodsActive from "@/components/AppGoodsActive.vue"
import Products from "@/components/Products.vue"
export default {
    data () {
        return {
            productsId:"",
            gallery:[],
            title:"",
            goods_brief:"",
            price:"",
            attributeList:[],
            goods_desc:"",
            goodsList:[],

            show: false,
            sku: {
                // 数据结构见下方文档
                hide_stock:false,
                tree:[],
                price:0.00,
                    stock_num:0.00,
            },
            goods: {
                // 数据结构见下方文档
                picture:''
            },
            goodsCount:0,
        }
    },
    created(){
        // alert(33)
        console.log(this.$route.query.id)
        // this.productsId = this.$router.query.id
        getGoodsData({id:this.$route.query.id})
        .then(res=>{
            // console.log(res)
            this.gallery = res.data.gallery
            this.title = res.data.info.name
            this.goods_brief = res.data.info.goods_brief
            this.price = res.data.info.retail_price
            this.attributeList = res.data.attribute
            this.goods_desc = res.data.info.goods_desc
            // sku 数据
            this.goods.picture = res.data.info.list_pic_url
            this.sku.price = res.data.info.retail_price
            this.sku.stock_num = res.data.info.goods_number

            this.productsId = res.data.productList[0].id
        }).catch(err=>{})

         gorRelatedData({id:this.$route.query.id})
        .then(res=>{
            console.log(res)
            this.goodsList = res.data.goodsList
        }).catch(err=>{})

        // 获取购物数量
        GetGoodsCount()
        .then(res=>{
            this.goodsCount = res.data.cartTotal.goodsCount
        }).catch(err=>{})

    },
    methods:{
        onChange(){

        },
        goToCard(){
            if(this.show){
                console.log("跳转购物车")
                console.log(this.$refs.sku.getSkuData())
                addToCard({
                    goodsId:this.$route.query.id,
                    productId : this.productsId,
                    number: this.$refs.sku.getSkuData().selectedNum
                })
                .then(res=>{
                    this.$toast("添加成功")
                    this.goodsCount = res.data.cartTotal.goodsCount
                    setTimeout(()=>{
                        this.$router.push("/cart")
                    },1200)
                }).catch(err=>{})
            }else{
                this.show = true
            }
        }
    },
    components:{
        Tips,
        AppGoodsActive,
        Products
    }
}
</script>
<style lang="less" scoped>
.van-swipe{
    height: 4rem;
}
.info{
    padding: .1rem;
    text-align: center;
    background: #fff;
    border-bottom:1px solid #ddd;
    div{
        font-size: .2rem;
        line-height: .4rem;
    }
    .goods_brief{
        font-size: .16rem;
    }
    .price{
        font-size: .15rem;
        color: darkred;
    }
}
.attribute{
    margin-top: .2rem;
    padding: .15rem;
    background: #fff;
    h3{
        font-size: .2rem;
        margin-bottom: .4rem;
    }
    li{
        display: inline-block;
        line-height: .4rem;
        background: #efefef;
        display: flex;
        margin-bottom: .1rem;
        border-radius: .05rem;
        .l{
            width: 28%;
            text-align: center;
            font-size: .12rem;
        }
        .r{
            flex: 1;
            font-size: .16rem;
        }
    }
}
// 深度样式写法，穿透Ui组件，直接添加到标签上
/deep/.goods_desc{
    img{
        display: block;
        width: 100%;    
    }
    
}
</style>